<template>
	<uni-popup ref="posters" type="center">
		<view class="pop-box">
			<view class="pop-top">
				<image v-if="qrCode" :src="qrCode" mode=""></image>
				<view class="txt1">NABERCAT</view>
				<view class="txt2">买猫就选nabercat，更放心</view>
				<view class="txt3">长按二维码进入 NABERCAT 小程序</view>
				<view class="txt3">立即查看TA的详细信息</view>
				<view class="bottom-btn" @click="save">保存卡片</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	props: {
		qrCode: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	created() {},
	mounted() {
		// this.open();
	},
	methods: {
		open() {
			this.$refs.posters.open();
		},
		close() {
			this.$refs.posters.close();
		},
		// 保存图片
		save() {
			this.$emit('saveImageToPhotosAlbum');
		}
	}
};
</script>

<style scoped lang="scss">
.pop-box {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: fixed;
	z-index: 9999999;
	.pop-top {
		width: 560rpx;
		height: 804rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 100rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		image {
			width: 448rpx;
			height: 448rpx;
			margin: 38rpx 0 14rpx;
		}
		.txt1 {
			font-size: 38rpx;
			line-height: 52rpx;
			color: #171717;
			font-weight: 600;
		}
		.txt2 {
			font-size: 16rpx;
			font-weight: 400;
			color: #636363;
			line-height: 24rpx;
			margin-bottom: 10rpx;
		}
		.txt3 {
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(23, 23, 23, 0.4);
			line-height: 40rpx;
		}
		.bottom-btn {
			width: 100%;
			height: 112rpx;
			line-height: 112rpx;
			text-align: center;
			background: #fa8384;
			border-radius: 0px 0px 20rpx 20rpx;
			font-size: 36rpx;
			color: #feffff;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
}
</style>
